<template>
	<div class="mainViewBig bigscreen" v-bind:style="style">
		<div class="_content">
			<div class="_bt1">
				<h1 class="_bt1_txt" ref="bt1Txt">{{ themeInfo.topicName1 }}</h1>
			</div>
			<div class="_bt1">
				<h1 class="_bt1_txt" ref="bt2Txt">{{ themeInfo.topicName2 }}</h1>
			</div>
		</div>
		<div class="_dw">
			<p class="_tips" style=" font-size: 80px !important;">{{ themeInfo.unitName1 }}</p>
			<p class="_tips" style=" font-size: 80px !important;">{{ themeInfo.unitName2 }}</p>
			<p class="_tips">{{ themeInfo.topicDate }}</p>
			<div class="_bottom">
				<p>{{ themeInfo.markName }}</p>
			</div>
		</div>
	</div>
</template>

<script>
	// import "./bigScreen.scss";
	import './flexible'
	import resize from "./resize";
	import elementResizeDetectorMaker from 'element-resize-detector'

	export default {
		name: "bigScreen",
		data() {
			return {
				style: {background:''}, //缩放样式
				themeInfo: {
					address: '',
					editPerson: '',
					topicName1: '',
					topicName2: '',
					unitName1: '',
					unitName2: '',
					topicDate: '',
					markName: '',
				},

				backGroundImg:{}
			};
		},
		methods: {

			getList() {

				let self = this;
				// for (let key in self.themeInfo) {
				// 	self.themeInfo[key] = '';
				// }
				self.$http({
					url: "/jinl/front/getFrontDisplay",
					method: "post",
					params: {type: 'frontPage'}
				}).then(resp => {
					if (resp.success) {
						let frontDisplays = resp.result.frontDisplays || [];
						let fileInfos = resp.result.fileInfos || [];
						if (frontDisplays.length > 0) {
							for (let data of frontDisplays) {
								let pageKey = data.pageKey
								if (!pageKey) {
									continue;
								}
								self.themeInfo[pageKey] = data.pageContent;
							}
						}
						if (fileInfos.length > 0) {
							self.backGroundImg = fileInfos.find((item)=>item.fileCheck == 1);
							self.style = {background:'url('+this.backGroundImg.fileUrl+')'};
							console.log('--self.style--')
							console.log(self.style)
						}
					}
				});
			},

			pageShow() {
				console.log("2222222");
				//页面初始宽高显示 和 页面大小改变监听
				this.style = resize.setScale();
				window.onresize = () => {
					this.style = resize.setScale();
					this.style.background = 'url('+this.backGroundImg.fileUrl+')';
				};
			},
			setFontSize() {
				//标题1缩放
				let erd = elementResizeDetectorMaker()
				let bt1Txt = this.$refs.bt1Txt
				let scaleX1 = 1;
				erd.listenTo(bt1Txt, (element) => {
					if (element.clientWidth > 1720) {
						scaleX1 = 1720 / element.clientWidth
					} else {
						scaleX1 = 1
					}
					bt1Txt.style.transform = 'scaleX(' + scaleX1 + ')';
				})

				//标题2缩放
				let bt2Txt = this.$refs.bt2Txt
				let scaleX2 = 1;
				erd.listenTo(bt2Txt, (element) => {
					if (element.clientWidth > 1720) {
						scaleX2 = 1720 / element.clientWidth
					} else {
						scaleX2 = 1
					}
					bt2Txt.style.transform = 'scaleX(' + scaleX2 + ')';
				})
			},
		},
		mounted() {
			let self = this;
			self.getList();
			self.pageShow();
			self.setFontSize();
			setInterval(() => {
				self.getList();
			},60000);

		},
	};
</script>

<style lang="scss" scoped>
	@import "@/views/basic-data/big-screen/bigScreen.scss";
	.bigscreen {
		background-size: 100% 100% !important;
		background-repeat: no-repeat !important;
		text-align: center !important;
	}
</style>
